<template>
	<view class="box">
		<m-background></m-background>
		<view class="login-box">
			<view class="logo">
				<image :src="getimageBaseUrl('logo.png')" mode="aspectFill"></image>
				<view class="title">
					<view>社区应急救援<text style="color: rgba(72, 118, 255, 1);">·管理员</text></view>
					<!-- <view style="color: rgba(72, 118, 255, 1);">·管理员</view> -->
				</view>
			</view>
			<!-- 管理员授权 -->
			<view class="auth">
				<view class="" style="width: 100%;height: 100%; margin-left: 32rpx; margin-top: 48rpx;">
					<u--form :borderBottom="false" labelPosition="top" :model="form"
						:labelStyle="{'font-size':'32rpx','font-weight': '600','letter-spacing': '1px','color': 'rgba(51, 51, 51, 1)'}">
						<u-form-item :borderBottom="false" labelWidth="200" label="账号" prop="form.username">
							<u--input
								:customStyle="{'border':'6rpx solid  rgba(230, 230, 230, 1)', 'padding':'14rpx 0 14rpx 20rpx', 'width':'600rpx', 'margin-top':'16rpx','border-radius':'16rpx'}"
								v-model="form.username" border="none" placeholder="输入用户名"
								placeholderStyle="color: rgba(153, 153, 153, 1); font-size:28rpx;letter-spacing: 1px;">
							</u--input clearable>
							<div style="color: red;" v-if="usernameRule">账号为6-12位</div>
						</u-form-item>
						<u-form-item :borderBottom="false" labelWidth="200" label="密码" prop="form.password">
							<u--input
								:customStyle="{'border':'6rpx solid  rgba(230, 230, 230, 1)', 'padding':'14rpx 0 14rpx 20rpx', 'width':'600rpx', 'margin-top':'16rpx','border-radius':'16rpx'}"
								v-model="form.password" border="none" password placeholder="输入密码"
								placeholderStyle="color: rgba(153, 153, 153, 1); font-size:28rpx;letter-spacing: 1px;">
							</u--input clearable>
							<div style="color: red;" v-if="passwordRule">密码为6-12位</div>
						</u-form-item>
						<view class="btn">
							<view class="resetBtn" @click="reset">
								重置
							</view>
							<view class="submitBtn" @click="submit">
								登录
							</view>
						</view>
					</u--form>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import lmd5 from '../../md5.js'
	export default {
		data() {
			return {
				//管理员登录校验
				usernameRule: false,
				passwordRule: false,
				form : {
					username: '',
					password: '',
				}
			};
		},
		onLoad() {
		},
		methods: {
			//重置
			reset() {
				this.form = {
					username: '',
					password: '',
				}
			},

			//提交
			submit() {
				//先校验
				if (this.form.username.length < 6 || this.form.username.length > 12) {
					this.usernameRule = true
				} else {
					this.usernameRule = false
				}
				if (this.form.password.length < 6 || this.form.password.length > 12) {
					this.passwordRule = true
					//return
				} else {
					this.passwordRule = false
				}

				if (!(this.usernameRule || this.passwordRule)) {

					// 校验成功登录
					let tempForm = null;
					tempForm = JSON.parse(JSON.stringify(this.form))
					tempForm.password = lmd5.hex_md5(tempForm.password)
					this.$request({
						url: `${this.$baseUrl}/admin/login`,
						method: "POST",
						data: tempForm
					}).then(res => {
						if (!res.data.status) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'error'
							})
						} else {
							uni.setStorageSync("admin", res.data.data)
							uni.navigateTo({
								url: '/package_admin/emergencyAdministrator/emergencyAdministrator'
							})
							this.form.password='';
						}
					}).catch(res => {

					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.box {
		box-sizing: border-box;

		.login-box {
			position: absolute;
			width: 750rpx;
			height: 1448rpx;
			overflow: hidden;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 1448rpx;

			.logo {
				margin-top: 128rpx;
				width: 400rpx;
				height: 160rpx;

				image {
					margin-left: 316rpx;
					width: 120rpx;
					height: 120rpx;
				}

				.title {
					display: flex;
					font-size: 36rpx;
					width: 376rpx;
					height: 52rpx;
					line-height: 52rpx;
					margin-left: 204rpx;
				}
			}

			.auth {
				overflow: hidden;
				background: rgba(255, 255, 255, 1);
				margin-top: 112rpx;
				margin-left: 32rpx;
				border-radius: 32rpx;
				width: 686rpx;
				height: 572rpx;

				box-shadow: 0px 4px 30px 0px rgba(32, 63, 117, 0.24);

				.btn {
					width: 622rpx;
					height: 104rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;

					.resetBtn {
						width: 302rpx;
						height: 104rpx;
						opacity: 1;
						border-radius: 16rpx;
						box-sizing: border-box;
						letter-spacing: 1px;
						color: rgba(52, 125, 250, 1);
						text-align: center;
						line-height: 104rpx;
						border: 4rpx solid rgba(52, 125, 250, 1);

					}

					.submitBtn {
						text-align: center;
						line-height: 104rpx;
						width: 302rpx;
						height: 104rpx;
						letter-spacing: 1px;
						opacity: 1;
						color: rgba(255, 255, 255, 1);
						border-radius: 16rpx;
						background: rgba(41, 121, 255, 1);

					}
				}
			}

		}
	}
</style>
